<template>
  <div class="homepage">
    <!-- 模型对比 -->
    <div class="main">
      <div class="top">
        <table class="ml-table">
          <thead>
            <tr>
              <th>模型</th>
              <th>准确率</th>
              <th>精确率</th>
              <th>召回率</th>
              <th>F1值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>随机森林预测模型</td>
              <td>0.94</td>
              <td>0.91</td>
              <td>0.98</td>
              <td>0.95</td>
            </tr>
            <tr>
              <td>逻辑回归模型</td>
              <td>0.98</td>
              <td>0.96</td>
              <td>1</td>
              <td>0.98</td>
            </tr>
            <tr>
              <td>决策树模型</td>
              <td>0.86</td>
              <td>0.87</td>
              <td>0.87</td>
              <td>0.87</td>
            </tr>
            <tr>
              <td>梯度提升算法</td>
              <td>0.94</td>
              <td>0.93</td>
              <td>0.96</td>
              <td>0.94</td>
            </tr>
            <tr>
              <td>XGBoost分类模型</td>
              <td>0.96</td>
              <td>0.95</td>
              <td>0.98</td>
              <td>0.96</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="bottom">
        <plot_model_metrics />
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.homepage {
  padding: 20px;
  width: 100%;
  height: 100vh;
  .main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .top {
      height: 400px;
      // background: #ab4545;

      .ml-table {
        border-collapse: collapse;
        width: 100%;
        height: 90%;
        
        // max-width: 800px;
        margin: 20px auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
      }
      .ml-table th {
        background: #2f4554;
        color: white;
        padding: 12px;
        text-align: center;
      }
      .ml-table td {
        padding: 12px;
        text-align: center;
        border-bottom: 1px solid #e8e8e8;
      }
      .ml-table tr:nth-child(even) {
        background-color: #f8f9fa;
      }
      .ml-table tr:hover {
        background-color: #f1f3f5;
      }

    }
    .bottom {
      flex: 1;
    }
  }
}
</style>
